<template>
  <a-table :rowKey="record => record.id" :columns="columns" :data-source="data" :pagination="false" :rowSelection="rowSelection">
    <span slot="serial" slot-scope="text, record, index">
      <template v-if="tableType == 'return'">
        {{ record.productNo }}
      </template>
      <template v-else>
        {{ index + 1 }}
      </template>
    </span>
    <span slot="goods" slot-scope="text, record">
      <div style="display: flex; align-items: center">
        <template v-if="tableType == 'replenish' || tableType == 'return'">
          <ListInfo :record="record" :showEb="true"></ListInfo>
        </template>
        <template v-else>
          <ListInfo :record="record"></ListInfo>
        </template>
        <span v-if="tableType == 'return' && (record.status == 0 || record.status == 8)" class="edit_red">未签收</span>
        <span v-if="tableType == 'return' && record.supplyId" class="edit_red">补货</span>
      </div>
    </span>
    <span slot="status" slot-scope="text">
      {{ text | goodsStatus }}
    </span>
    <span slot="price" slot-scope="text, record">
      <p class="red special-price" v-if="record.vipPrice">¥ {{ record.vipPrice }}</p>
      <p class="red special-price" v-else-if="record.productFavorablePrice">¥ {{ record.productFavorablePrice }}</p>
      <p :class="[record.vipPrice || record.productFavorablePrice ? 'has-special' : '', 'origin-price']">¥ {{ text }}</p>
    </span>
    <span slot="action" slot-scope="text, record, index">
      <a @click="handleDelete(index)" v-if="tableType == 'replenish'"><a-icon type="delete"/></a>
      <template v-if="tableType == 'abnormal'">
        <span class="btn">
          <a>已购买</a>
          <a-divider type="vertical" />
          <a>再次还货</a>
        </span>
        <span class="status">已购买|再次还货</span>
      </template>
    </span>
  </a-table>
</template>
<script>
import ListInfo from '@views/box/components/goodsInfo/listInfo'
import globalData from '@/views/box/util/global'
const columns = [
  {
    title: '序号',
    align: 'center',
    // dataIndex: 'productNo',
    scopedSlots: { customRender: 'serial' },
    width: '10%'
  },
  {
    title: '商品',
    dataIndex: 'barcode',
    scopedSlots: { customRender: 'goods' },
    width: '53%'
  },
  {
    title: '单价',
    dataIndex: 'productPrice',
    width: '18%',
    scopedSlots: { customRender: 'price' }
  }
  /* {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  } */
]
export default {
  props: {
    tableData: {
      type: Array,
      default: null
    },
    tableType: {
      type: String,
      default: ''
    }
  },
  components: {
    ListInfo
  },
  data() {
    // this.columns = columns
    return {
      data: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  watch: {
    tableData(val) {
      console.log(val)
      if (val) {
        this.data = JSON.parse(JSON.stringify(val))
        this.selectedRowKeys = val.map(item => item.id)
        this.$emit('getData', val)
      }
    }
  },
  computed: {
    columns() {
      let newcolumns = []
      if (this.tableType == 'replenish' || this.tableType == 'abnormal') {
        newcolumns = [
          ...columns,
          ...[
            {
              title: '操作',
              dataIndex: 'action',
              scopedSlots: { customRender: 'action' },
              width: '20%'
            }
          ]
        ]
        return newcolumns
      } else if (this.tableType == 'test') {
        newcolumns = [
          ...columns,
          ...[
            {
              title: '状态',
              dataIndex: 'status',
              scopedSlots: { customRender: 'status' },
              width: '20%'
            }
          ]
        ]
        return newcolumns
      } else {
        return columns
      }
    },
    rowSelection() {
      // if (this.tableType == 'replenish' || this.tableType == 'return') {
      //   return null
      // } else if (this.tableType == 'delete') {
      //   return {
      //     selectedRowKeys: this.selectedRowKeys,
      //     onChange: this.onSelectChange
      //   }
      // }
      if (this.tableType == 'replenish'|| this.tableType == 'return') {
        return null
      } else {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    }
  },
  filters: {
    goodsStatus(v) {
      let status = globalData.goodsStatus
      let result = status.filter(e => e.stateValue == v)
      if (result.length > 0) {
        return result[0].stateName
      } else {
        return v
      }
    }
  },
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.tableData))
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.$emit('getData', selectedRows)
      this.$emit('handleSelect', selectedRowKeys)
    },
    handleDelete(index) {
      this.data.splice(index, 1)
      this.$emit('updateData', this.data)
    }
  }
}
</script>
<style lang="less" scoped>
.edit_red {
  color: #f45555;
  margin-left: 16px;
  font-size: 14px;
  width: 50px;
}
.red {
  color: #f45555;
  margin-right: 24px;
  font-size: 20px;
}
.special-price {
  font-size: 14px;
  // margin-bottom: 4px;
  margin-right: 0;
}
.has-special {
  text-decoration: line-through;
}
.origin-price,
.special-price {
  margin-bottom: 4px;
}
</style>

